<template>
	<view>
		<view class="titleBox">
			<view class="titleLeft">
				<img src="../../static/title/back.png" class="titleBack" @click="goBack">
			</view>
			<view class="titleText">
				<text>发布求租</text>
			</view>
			<view class="titleRight">
		
			</view>
		</view>
		<view class="box">
			<view class="box-item">
				<view class="left">
					标题
					<input type="text" v-model="inputList.Title">
				</view>
				<view class="right">
					
				</view>
			</view>
			<view class="box-item">
				<view class="left">
					经营意向
					<input type="text" v-model="inputList.BusinessPurpose">
				</view>
				<view class="right">
					
				</view>
			</view>
			<view class="box-item">
				<view class="left">
					面积要求(/m²)
					<view class="left-cont">
						<input class="text" type="text" v-model="Area.AeraMin">--
						<input style="margin-left: 60rpx;" class="text" type="text" v-model="Area.AeraMax">
					</view>
				</view>
				<view class="right">
				</view>
			</view>
			<view class="box-item">
				<view class="left">
					租金范围(元/月)
					<view class="left-cont">
						<input class="texts" type="text" v-model="Price.PriceMin">--
						<input style="margin-left: 80rpx;" class="texts" type="text" v-model="Price.PriceMax">
					</view>
				</view>
				<view class="right">
					
				</view>
			</view>
			<view class="box-item">
				<view class="left" >
					期望区域
					<pickerAddress @change="change">{{txt}}</pickerAddress>
				</view>
				<view class="right"  @change="change">
					<uni-icons color= "#747475" class="icon" type="bottom" size="30"></uni-icons>
				</view>
			</view>
			<!-- <view class="box-item">
				<view class="left">
					求租类型（商铺或办公）
					<input type="text" v-model="inputList.RequestType">
				</view>
				<view class="right">
					
				</view>
			</view> -->
			<view class="box-item">
				<view class="left" @click="isdoor=true">
					<text>求租类型（商铺或办公）</text>
						<!-- <input type="text" v-model="doorname1"> -->
					<text class="input">{{doorname}}</text>
				</view>
				<view class="right">
					<uni-icons color= "#747475" class="icon" type="bottom" size="30"></uni-icons>
				</view>
			</view>
			<u-picker :show="isdoor" :columns="columns" keyName="name" @cancel="isdoor=false" @confirm="notarize"></u-picker>
			<view class="box-item">
				<view class="left">
					联系人
					<input type="text" v-model="inputList.ContactPerson">
				</view>
				<view class="right">
					
				</view>
			</view>
			<view class="box-item">
				<view class="left">
					联系电话
					<input type="text" v-model="inputList.Tel">
				</view>
				<view class="right">
					
				</view>
			</view>
			<view class="box-item lefts">
				<view class="lefts">
					备注
					<view class="contetn">
						<textarea v-model="inputList.Desciption" name="" id="" cols="1" rows="4"></textarea>
					</view>
				</view>
				<view class="right">
					
				</view>
			</view>
		</view>
		<!-- 底部发布按钮 -->
		<view class="btn-box">
			<button @click="open">发布</button>
		</view>
		<!-- 发布成功弹窗 -->
		<uni-popup ref="popup" type="bottom">
			<uni-card>
				<view class="card-1">
					发布成功提示
				</view>
				<view class="card-2">
					您已经发布成功
				</view>
				<view class="card-3">
					由于展示功能仅会员人员才能上架
				</view>
				<view class="card-4">
					您可以选择立即开通会员或到我的发布里面查看详情
				</view>
				<view class="card-5">
					<button class="card-5-btn" @click="onClick">立即开通</button>
				</view>
				<view class="card-6" @click="close">
					我在想想
				</view>
			</uni-card>
		</uni-popup>
	</view>
</template>

<script>
	import pickerAddress from '../shop-rent-out/picker.vue'
	export default {
		components:{
		    pickerAddress
		},
		data() {
			return {
				txt: '选择地址',
				title: 'Hello',
				isdoor: false,
				doorname: '请选择类型',
				columns: [
					[{	
						name: '商铺',
						id: 1
					},
					{
						name: '办公',
						id: 2
					}]
				],
				inputList:{
					OpenID:'owner',
					Title:'宿城', //标题
					BusinessPurpose:'蛋糕店',  //经营意向
					AeraMin:'150',  //面积要求
					AeraMax:'200',  //面积要求
					PriceMin:'3000',  //租金下限
					PriceMax:'5000',  //租金上限
					DistinctID:'1015',  //期望区域
					RequestType:'办公',	//求租类型
					ContactPerson:'于冰',  //联系人
					Tel:'18914894368',  //联系电话
					Desciption:'要求',  //备注
					Surportings: '停车场,食堂'
				},
				leaselise:[],
				Area: {
					AeraMin:150,
					AeraMax:200
				},
				Price:{
					PriceMin: 3000,
					PriceMax: 5000
				}
			}
		},
		onLoad() {
			this.openid = uni.getStorageSync('OpenID');
			this.inputList.OpenID = this.openid
			// console.log(this.inputList.OpenID)
		},
		methods: {
			change(data) {
			    this.txt = data.data.join('')
			},
			notarize(e) {
				this.doorname = e.value[0].name;
				this.isdoor = false;
				this.inputList.RequestType = e.value[0].id
				// console.log(this.inputList.BulidType)
			},
			// 返回
			goBack() {
				uni.navigateBack(1)
			},
			// 打开弹窗
			open(){
				this.inputList.AeraMin = this.Aera.AeraMin
				this.inputList.AeraMax = this.Aera.AeraMax
				this.inputList.PriceMin = this.Price.PriceMin
				this.inputList.PriceMax = this.Price.PriceMax
				this.$myRequest({
					url: 'requsetPublish',
					data: this.inputList,
					dataType: 'json',
				}).then(res => {
					this.leaselise = res.data;
					console.log(this.leaselise)
					this.$refs.popup.open('center')
				})
			},
			// 跳转到会员支付页面
			onClick() {
				uni.navigateTo({
					url:'/pagesA/member-pay/member-pay'
				})
				this.$refs.popup.close()
			},
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style scoped>
	.box {
		padding: 0 32rpx;
	}

	.box-item {
		justify-content: space-between;
		line-height: 100rpx;
		border-bottom: 1px solid #ccc;
	}
	.left {
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #A8A8A8;
		display: flex;
		flex-direction: column;
	}
	input{
		color: #000;
	}
	.add {
		position: relative;
		width: 50rpx;
		height: 50rpx;
		background-color: #ccc;
		text-align: center;
		margin-top: 30rpx;
		margin-right: 10rpx;
	}

	.add-text {
		position: absolute;
		top: -24rpx;
		left: 16rpx;
	}

	.img-box {
		display: flex;
		justify-content: space-around;

	}
	
	.right{
		position: relative;
		top: -100rpx;
		right: 0;
		bottom: 0;
	}
	.right .icon{
		position: absolute;
		right: 0rpx;
	}
	img {
		/* width: 200rpx;
		height: 200rpx; */
		padding-top: 30rpx;
		margin-bottom: 200rpx;
	}
	.btn-box {
		
	}
	button {
		width: 380rpx;
		height: 70rpx;
		background: #FF5F17;
		border-radius: 34rpx;
		opacity: 1;
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		margin: 38rpx auto;
	}
	.bom-box {
		width: 100%;
		height: 200rpx;
		border: 1rpx solid #ccc;
		color: #ccc;
		padding: 10rpx;	
		margin-bottom: 150rpx;
	}
	.titleBack {
		position: absolute;
		top: 20rpx;
		font-size: 60rpx;
		color: #ccc;
	}
	.card-1 {
		text-align: center;
		font-size: 30rpx;
	}
	.card-2 {
		font-size: 30rpx;
		font-weight: 500;
		margin: 30rpx 0;
	}
	.card-3 {
		font-size: 30rpx;
		font-weight: 500;
		margin: 30rpx 0;
	}
	.card-4 {
		 word-break:keep-all;
		  white-space:nowrap;   
	}
	.card-5 {
		text-align: center;
		margin: 20rpx 0 10rpx 0;
	}
	.card-5-btn {
		color: #000;
		width: 50%;
		border: 1px solid #000;
		background-color: #fff;
		line-height: 60rpx;
	}
	.card-6 {
		text-align: center;
		color: #ccc;
		margin-bottom: 50rpx;
	}
	.picker{
		padding: none;
	}
	.left-cont{
		display: flex;
		height: 40rpx;
		align-items: center;
	}
	.left-cont .text{
		width: 100rpx;
		padding: 0;
	}
	.left-cont .texts{
		width: 150rpx;
		padding: 0;
	}
	.lefts{
		border: none;
	}
	.contetn{
		background-color: #ccc;
		width: 660rpx;
		height: 160rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
	}
	.lefts textarea{
		padding: 10rpx;
	}
</style>
